/**
 * rakuen/ribbons
 * 飘带编辑器
 * 
 * @author Zdream
 * @since aurora 0.4.0
 */

function create (context) {
  return {
    template : context.template,
    data : function () {
      return {
        status : null,
        dirty : false,
        
        // ribbon color HSL saturation amount
        colorSaturation : 80, // '80%'
        // ribbon color HSL brightness amount
        colorBrightness : 60, // '60%'
        // ribbon color opacity amount
        colorAlpha : 65, // 除以 100
        // how fast to cycle through colors in the HSL color space
        colorCycleSpeed : 6,
        // where to start from on the Y axis on each side (top|min, middle|center, bottom|max, random)
        verticalPosition : "center",
        // how fast to get to the other side of the screen
        horizontalSpeed : 150,
        // how many ribbons to keep on screen at any given time
        ribbonCount : 3,
        // add stroke along with ribbon fill colors
        strokeSize : 0,
        // // move ribbons vertically by a factor on page scroll
        // parallaxAmount = -0.5;
        // add animation effect to each ribbon section over time
        animateSections : true,
      };
    },
    props : {
      sid : String,
    },
    methods : {

      btnPlay : function () {
        context.sendCommand(this.sid, 'play', null);
      },
      btnPause : function () {
        context.sendCommand(this.sid, 'pause', null);
      },
      btnStop : function () {
        context.sendCommand(this.sid, 'stop', null);
      },

      btnAbort : function () {
        this.dirty = false;
        this.overrideData();
      },
      btnSubmit : function () {
        context.sendCommand(this.sid, 'setOption', {
          colorSaturation: this.colorSaturation + "%",
          colorBrightness: this.colorBrightness + "%",
          colorAlpha: this.colorAlpha / 100,
          colorCycleSpeed: this.colorCycleSpeed,
          verticalPosition: this.verticalPosition,
          horizontalSpeed: this.horizontalSpeed,
          ribbonCount: this.ribbonCount,
          strokeSize: this.strokeSize,
          animateSections: this.animateSections
        });
      },

      onEdit : function () {
        this.dirty = true;
      },

      overrideData : function () {
        if (this.status && this.status.data) {
          let source = this.status.data.option;

          this.colorSaturation = parseInt(source.colorSaturation.substring(0, source.colorSaturation.length - 1));
          this.colorBrightness = parseInt(source.colorBrightness.substring(0, source.colorBrightness.length - 1));
          this.colorAlpha = parseInt(source.colorAlpha * 100);
          this.colorCycleSpeed = source.colorCycleSpeed;
          this.verticalPosition = source.verticalPosition;
          this.horizontalSpeed = source.horizontalSpeed;
          this.ribbonCount = source.ribbonCount;
          this.strokeSize = source.strokeSize;
          this.animateSections = source.animateSections;
        }
      },

      // 监听事件部分
      onScreenUpdated : function () {
        this.status = context.getStatus(this.sid);
        if (!this.dirty) {
          this.overrideData();
        }
      }
    },
    mounted : function () {
      this.onScreenUpdated();
      
      context.getBus().$on('screen-status-sync-all', this.onScreenUpdated);
      context.getBus().$on('screen-updated', this.onScreenUpdated);
      context.getBus().$on('screen-destroyed', this.onScreenUpdated);
    },
    destroyed : function () {
      context.getBus().$off('screen-status-sync-all', this.onScreenUpdated);
      context.getBus().$off('screen-updated', this.onScreenUpdated);
      context.getBus().$off('screen-destroyed', this.onScreenUpdated);
    }
  }
}

export default create;
